<!--  -->
<template>
    <view class="my">
        <view class="header">
            <image class="profile" src="/static/profile.png" />
            <view class="info">
                <view class="name">系统管理员</view>
                <view class="date">{{ $u.timeFormat(timestamp, "yyyy年mm月dd日") }}</view>
            </view>
        </view>
        <view class="card-box">
            <view>
                <view class="num">28</view>
                <view>智慧单元</view>
            </view>
            <view class="line"></view>
            <view> <view class="num">8</view> <view>智慧仓库</view></view>
            <view class="line"></view>
            <view> <view class="num">0</view> <view>员工数量</view></view>
        </view>
        <view class="content">
            <view class="title">常用功能</view>
            <view class="content-card">
                <view class="card_item" style="margin-bottom: 80rpx">
                    <view class="card" @click="toYJXX">
                        <image src="/static/my_icon_1.png" />
                        <view>预警信息</view>
                    </view>
                    <view class="card" @click="toDy">
                        <image src="/static/my_icon_2.png" />
                        <view>控制器</view>
                    </view>
                    <view class="card" @click="tosxt">
                        <image src="/static/my_icon_3.png" />
                        <view>通用视频</view>
                    </view>
                    <view class="card" @click="gnkfzh">
                        <image src="/static/my_icon_4.png" />
                        <view>人员管理</view>
                    </view>
                </view>
                <view class="card_item">
                    <view class="card" @click="toCK">
                        <image src="/static/my_icon_5.png" />
                        <view>库存管理</view>
                    </view>
                    <view class="card" @click="toCKJL">
                        <image src="/static/my_icon_5.png" />
                        <view>出库记录</view>
                    </view>
                    <view class="card" @click="toCPSY">
                        <image src="/static/my_icon_6.png" />
                        <view>溯源档案</view>
                    </view>
                    <view class="card" @click="gnkfzh">
                        <image src="/static/my_icon_7.png" />
                        <view>种植管理</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return { timestamp: new Date().getTime() };
    },

    //方法集合
    methods: {
        toCPSY() {
            uni.navigateTo({
                url: "/pages/ck/syxx",
            });
        },
        toYJXX() {
            uni.navigateTo({ url: "/pages/dy/sbyj" });
        },
        toCKJL() {
            uni.navigateTo({ url: "/pages/ck/ckjl" });
        },
        toCK() {
            uni.navigateTo({ url: "/pages/ck/index" });
        },
        tosxt() {
            uni.setStorageSync("tabParams", 2);
            uni.switchTab({ url: "/pages/dy/index" });
        },
        toDy() {
            uni.switchTab({ url: "/pages/dy/index" });
        },
        gnkfzh() {
            uni.showModal({
                title: "",
                content: "功能开发中",
                showCancel: false,
                success: ({ confirm, cancel }) => {},
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.my {
    padding: 0 40rpx;
}
.header {
    margin-top: 40rpx;
    display: flex;
    gap: 16rpx;
    .info {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .name {
        font-size: 34rpx;
        font-weight: 700;
        margin-bottom: 20rpx;
    }
    .date {
        font-size: 26rpx;
        color: #999;
    }
    .profile {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
    }
}
.card-box {
    margin-top: 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 24rpx;
    padding: 40rpx 80rpx;
    text-align: center;
    font-size: 30rpx;
    color: #999;
    .num {
        font-size: 36rpx;
        font-weight: 700;
        color: #333;
        margin-bottom: 16rpx;
    }
    .line {
        width: 1rpx;
        height: 60rpx;
        background-color: #cecece;
    }
}
.content {
    margin-top: 40rpx;
    .title {
        position: relative;
        padding-left: 16rpx;
        font-size: 32rpx;
        color: #666;
        font-weight: 700;
        &::after {
            content: "";
            position: absolute;
            width: 3px;
            height: 32rpx;
            background-color: #1296db;

            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
    }
    .content-card {
        margin-top: 40rpx;
        padding: 50rpx;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 25rpx;
        color: #666;
        .card_item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            text-align: center;
        }
        image {
            width: 60rpx;
            height: 60rpx;
            margin-bottom: 16rpx;
        }
    }
}
</style>
